<template>
  <div>
    <h3>用户列表</h3>
    <x-button type="primary" @click.native="toAddUser">+添加用户</x-button>
    <group>
      <x-table>
        <thead>
          <tr class="table-header">
            <th>用户</th>
            <th>角色</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="data.length==0" class="table">
            <td>暂无数据</td>
            <td>暂无数据</td>
            <td>暂无数据</td>
          </tr>
          <tr v-for="item in data" :key="item.id" class="table">
            <td @click="toAreaListOfUser(item.id)">{{item.account}}</td>
            <td> <span v-if="item.role==2">普通用户</span> <span v-if="item.role==1">管理员</span> </td>
            <td class="table-set">
              <x-button type="primary" @click.native="toEditUser(item.id)">编辑</x-button>
              <x-button type="warn" @click.native="delUser(item.id)">删除</x-button>
            </td>
          </tr>
        </tbody>
      </x-table>
    </group>

    <confirm v-model="showConfirm" title="操作提示" content="将删除该用户，请再次确认？" @on-confirm="onConfirm">
    </confirm>
    <loading :show="showDele" text="删除中..."></loading>
    <toast v-model="showToast1" type="success" text="删除成功"></toast>
    <toast v-model="showToast2" type="cancel" text="删除失败，请再试。"></toast>
    <loading :show="showLoading" text="加载中..."></loading>
  </div>
</template>

<script>
import { Group, XButton, XTable, Confirm, Toast, Loading } from "vux";
import Http from "./../unit/http.js";

export default {
  components: {
    Group,
    XButton,
    XTable,
    Confirm,
    Toast,
    Loading
  },
  data() {
    return {
      data: [],
      userId: 0,

      showLoading:false,
      showConfirm: false,
      showDele: false,
      showToast1: false,
      showToast2: false
    };
  },

  mounted() {
    this.getData();
  },
  watch:{
    data:function(){
      this.showLoading = false
    }
  },
  methods: {
    getData() {
      this.showLoading = true;
      const self = this;
      const param = {};
      const url = "/yitai/admin/user/list";
      const success = function(response) {
        
        self.data = response.data.info;
      };
      const failed = function() {
        
      };
      Http.http(url, param, success, failed);
    },

    toAddUser() {
      this.$router.push({ path: "/editUser" });
    },

    toEditUser(id) {
      this.$router.push({ path: "/editUser", query: { id: id } });
    },

    toAreaListOfUser(id) {
      this.$router.push({ path: "/areaListOfUser", query: { id: id } });
    },

    delUser(id) {
      this.userId = id;
      this.showConfirm = true;
    },
    onConfirm() {
      const self = this;
      self.showDele = true;
      const param = { userId: self.userId };
      const url = "/yitai/admin/user/delete";
      const success = function(response) {
       

        self.getData();

        self.showDele = false;
        self.showToast1 = true;
      };
      const failed = function() {
        
        self.showDele = false;
        self.showToast2 = true;
      };
      Http.http(url, param, success, failed);
    }
  }
};
</script>





<style scoped >
h3 {
  margin-bottom: 20px;
}

button.weui-btn {
  font-size: 18px;
}
.weui-btn_primary {
  background-color: #005e9c;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: rgba(255, 255, 255, 0.6);
  background-color: #034b7a;
}
.weui-btn_disabled.weui-btn_primary {
  background-color: #3978a1;
}

.table-header th {
  font-weight: bold;
  font-size: 18px;
}

.table {
  font-size: 18px;
}
.table td {
  padding: 8px 1px;
  text-align: center;
  line-height: 30px;
}

.table-set {
  display: flex;
}
.table-set button.weui-btn {
  font-size: 17px;
  margin: 6px 4px;
}

.vux-table:after {
  border-top: 1px solid #888888;
}
.vux-table td:before,
.vux-table th:before {
  border-bottom: 1px solid #888888;
}
.vux-table td:after,
.vux-table th:after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid #888888;
  color: #c7c7c7;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
  transform: scaleX(0.5);
}
</style>